<template>
	<div class="login-wrap">
		<div class="login-box">
			<div class="title">
				<img style="width:48px; margin-right: 6px;" src="../assets/logo.png" alt="">
				<!-- <svg-icon name="logo" color="#f60" class="logo" /> -->
				<span>中铁建工集团第四建设有限公司</span>
			</div>

			<div class="form">
				<a-form :model="formState" @finish="submitLogin">
					<a-form-item name="username" :rules="[{ required: true, message: '请输入账号' }]">
						<a-input v-model:value="formState.username" placeholder="请输入账号">
							<template #prefix>
								<user-outlined :style="{color: '#39f'}" />
							</template>
						</a-input>
					</a-form-item>

					<a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
						<a-input-password v-model:value="formState.password" placeholder="请输入密码">
							<template #prefix>
								<lock-outlined :style="{color: '#39f'}" />
							</template>
						</a-input-password>
					</a-form-item>

					<a-form-item>
						<a-form-item name="remember" no-style>
							<div class="password-row">
								<a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>
								<a-button type="link" @click="visible=true">重置密码</a-button>
							</div>
						</a-form-item>
					</a-form-item>

					<a-form-item>
						<a-button :disabled="disabled" block type="primary" html-type="submit" size="large">登录</a-button>
						<a-button :disabled="disabled" block size="large" class="mt-2" @click="router.push(`signCompany`);">供应商注册</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>

		<a-modal v-model:visible="visible" :z-index="1001" width="400px" title="重置密码" @ok="resetPassword">
			<a-form ref="passwordRef" :model="passwordState" :rules="passwordRules" v-bind="{ labelCol: { style: { width: '100px' } } }">
				<a-form-item label="手机号" name="mobile" :rules="{required:true, message:'请输入手机号'}">
					<a-input v-model:value="passwordState.mobile" placeholder="请输入手机号" />
				</a-form-item>
				<a-form-item label="验证码" name="code" :rules="{required:true, message:'请输入验证码'}">
					<a-input-group compact>
						<a-input v-model:value="passwordState.code" :maxlength="4" style="width: calc(100% - 100px)" />
						<a-button v-if="smsTime > 0" type="primary" :disabled="true" style="width:100px">{{ smsTime }}s重新发送</a-button>
						<a-button v-else type="primary" :disabled="!/^[1][3-9][0-9]{9}$/.test(passwordState.mobile)" style="width:100px" @click="getSmsCode">{{ !smsTicket ? '发送验证码' : '重新发送' }}</a-button>
					</a-input-group>
				</a-form-item>
				<a-form-item label="新密码" name="password">
					<a-input-password v-model:value="passwordState.password" />
				</a-form-item>
				<a-form-item label="确认密码" name="confirm">
					<a-input-password v-model:value="passwordState.confirm" />
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script>
import { defineComponent, ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";

import { post } from "../utils";
import { useRouter } from "vue-router";

export default defineComponent({
	name: "Login",
	components: {
		UserOutlined,
		LockOutlined
	},

	setup() {
		const { proxy } = getCurrentInstance();
		const router = useRouter();
		onMounted(async () => {
			await nextTick();
		});

		const formState = reactive({});

		const disabled = ref(false);

		const submitLogin = () => {
			const { username, password } = formState;

			post("login", { username, password })
				.then(data => {
					const { token } = data;
					proxy.$cookies.set("token", token);
					proxy.$cookies.remove("_tab_panes");
					window.location.href = "/";
				})
				.catch(err => {
					proxy.$message.error(err);
				});
		};

		const visible = ref(false);
		const passwordRef = ref();
		const passwordState = ref({});
		const passwordRules = {
			password: [
				{
					required: true,
					trigger: "blur",
					validator: (rule, value) => {
						if (!value) return Promise.reject("请输入新密码");

						if (!new RegExp("(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,20}").test(value)) return Promise.reject("您的密码复杂度太低（密码中必须包含大小字母、数字、特殊字符，长度为8-20个字符）");

						return Promise.resolve();
					}
				}
			],
			confirm: [
				{
					required: true,
					trigger: "blur",
					validator: (rule, value) => {
						if (value !== passwordState.value.password) return Promise.reject("确认密码不一致");

						return Promise.resolve();
					}
				}
			]
		};
		const resetPassword = () => {
			passwordRef.value.validate().then(() => {
				const { password, code } = passwordState.value;
				post("portal/reset/password", {
					password,
					code,
					ticket: smsTicket.value
				})
					.then(() => {
						proxy.$message.success("密码重置成功，请使用新密码登录");
						visible.value = false;
						passwordState.value = {};
					})
					.catch(err => {
						proxy.$message.error(err);
					});
			});
		};

		const smsTime = ref(0);
		const smsTicket = ref("");

		const countdown = () => {
			const t = setInterval(() => {
				if (smsTime.value === 0) clearInterval(t);

				smsTime.value--;
			}, 1000);
		};

		const getSmsCode = () => {
			const { mobile } = passwordState.value;
			post("portal/mobile/code", { mobile })
				.then(({ ticket }) => {
					smsTicket.value = ticket;
					smsTime.value = 60;
					countdown();
				})
				.catch(err => {
					proxy.$message.error(err);
				});
		};

		return {
			formState,
			submitLogin,
			disabled,

			visible,
			passwordRef,
			passwordState,
			passwordRules,
			resetPassword,
			router,
			smsTime,
			smsTicket,
			getSmsCode
		};
	}
});
</script>


<style scoped lang="scss">
.login-wrap {
	height: 100vh;
	background: url("../assets/login-bg3.png") no-repeat;
	// background-size:100% 100%;
	background-position:right center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-box {
	width: 400px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.8);
	padding: 32px;
	border-radius: 8px;
	box-shadow: 0 6px 50px rgba(41, 59, 125, 0.13);

	position: relative;
	margin-top: -150px;

	.title {
		display: flex;
		align-items: center;
    justify-content: center;
		font-size: 20px;
		font-weight: 800;
		margin-bottom: 20px;
		padding: 10px 0 25px;

		.logo {
			width: 48px;
			height: 48px;

			margin-right: 8px;
		}
	}
}

.password-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
